<!DOCTYPE html>
<!--
This is a starter template page. Use this page to start your new project from
scratch. This page gets rid of all links and provides the needed markup only.
-->
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>物资借用</title>
    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="../../../../plugins/fontawesome-free/css/all.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="../../../../plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css">
    <link rel="stylesheet" href="../../../../dist/css/adminlte.min.css">
    <!-- Google Font: Source Sans Pro -->
    <link rel="stylesheet" href="../../plugins/select2/css/select2.min.css">
    <link rel="stylesheet" href="../../plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
    <link href="../../../../dist/css/fonts.css" rel="stylesheet">
</head>

<body class="hold-transition sidebar-mini">
    <div class="wrapper">
        <!-- Navbar -->
        <nav class="main-header navbar navbar-expand navbar-white navbar-light" id="navbar_menu">
            <!-- Left navbar links -->
        </nav>
        <!-- /.navbar -->
        <!-- Main Sidebar Container -->
        <aside class="main-sidebar sidebar-dark-primary elevation-4" id="sidebar_menu">
        </aside>
        <!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper">
            <section class="content-header">
                <div class="container-fluid">
                    <div class="row mb-2">
                        <div class="col-sm-6">
                            <h1>物资借用</h1>
                        </div>
                        <div class="col-sm-6">
                            <ol class="breadcrumb float-sm-right">
                                <li class="breadcrumb-item"><a href="#">Home</a></li>
                                <li class="breadcrumb-item active">物资借用</li>
                            </ol>
                        </div>
                    </div>
                </div><!-- /.container-fluid -->
            </section>
            <div class="content">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">物资借用列表</h3>
                            </div>
                            <!-- /.card-header -->
                            <div class="card-body table-responsive p-0">
                                <table class="table table-hover text-nowrap">
                                    <thead>
                                        <tr>
                                            <th style="text-align: center;">编号</th>
                                            <th style="text-align: center;">物资名称</th>
                                            <th style="text-align: center;">物资总数</th>
                                            <th style="text-align: center;">可借数量</th>
                                            <th style="text-align: center;">操作</th>
                                        </tr>
                                    </thead>
                                    <tbody id="pageBody">
                                    </tbody>
                                </table>
                            </div>
                            <!-- /.card-body -->

                            <div class="card-footer clearfix">
                                <ul class="pagination pagination-sm m-0 float-right" id="turnPages">
                                    <li class="page-item dropdown" style="margin-top:-5px" data-page="-2">
                                        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">
                                            每页10条 <span class="caret"></span>
                                        </a>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item" tabindex="5" href="" onclick="return false">5</a>
                                            <a class="dropdown-item" tabindex="10" href="" onclick="return false">10</a>
                                            <a class="dropdown-item" tabindex="20" href="" onclick="return false">20</a>
                                            <a class="dropdown-item" tabindex="30" href="" onclick="return false">30</a>
                                            <a class="dropdown-item" tabindex="40" href="" onclick="return false">40</a>
                                            <a class="dropdown-item" tabindex="50" href="" onclick="return false">50</a>
                                        </div>
                                    </li>
                                    <li class="page-item" data-page="0">
                                        <a class="page-link" href="javascript:void(0);">&laquo;</a>
                                    </li>

                                </ul>
                            </div>

                            <!-- <div class="card-footer clearfix">
                                <ul class="pagination pagination-sm m-0 float-right" id="turnPages">
                                    <li class="page-item" data-page="0">
                                        <a class="page-link" href="javascript:void(0);">&laquo;</a>
                                    </li>
                                    <li class="page-item" data-page="-1">
                                        <a class="page-link" href="javascript:void(0);">&raquo;</a>
                                    </li>
                                </ul>
                            </div> -->
                        </div>
                        <!-- /.card -->

                        <!-- /.card -->
                    </div>
                    <!-- /.col -->
                </div>

            </div>
            <!-- /.content -->
        </div>
    </div>
    <!-- /.content-wrapper -->
    </div>

    <div class="modal fade" id="modal_borrow">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">借用数量</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <select class="form-control select2bs4" style="width: 100%;">
                        
                    </select>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="submit_btn">提交</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <!-- ./wrapper -->
    <!-- REQUIRED SCRIPTS -->
    <!-- jQuery -->
    <script src="../../../../plugins/jquery/jquery.min.js"></script>
    <script>
        // 引入左边导航栏
        $.get("../../../../bars/Member/member_sidebar.html", function (data) {
            // console.log(data)
            $("#sidebar_menu").html(data);
        })
        //引入上边导航栏 
        $.get("../../../../bars/Member/member_navbar.html", function (data) {
            $("#navbar_menu").html(data);
        })
    </script>

    <!-- Bootstrap 4 -->
    <script src="../../plugins/select2/js/select2.full.min.js"></script>
    <script src="../../../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <!-- AdminLTE App -->
    <script src="../../../../plugins/sweetalert2/sweetalert2.min.js"></script>
    <script src="../../../../dist/js/adminlte.min.js"></script>
    <script>
        $('.select2bs4').select2({
            theme: 'bootstrap4'
        })
        const Toast = Swal.mixin({
            toast: true,
            showConfirmButton: false,
            timer: 1500
        });
        let page_limit = 10
        let page_current = 1
        let max_page
        let thing_list
        let thing_id
        $(function () {
            // 翻页按钮委托注册事件
            $.ajax({
                type: 'POST',
                url: '/member/getThingList',
                async: true,
                dataType: 'json',
                data: {
                    page: page_current,
                    limit: page_limit
                },
                contentType: "application/x-www-form-urlencoded",
                success: function (res) {
                    console.log(res)
                    thing_list = res.data
                    max_page = Math.ceil(res.count / page_limit)
                    buildTableFooter(max_page)
                    buildTableBody(thing_list)
                },
                error: function (err) {
                    // console.log(JSON.stringify(err))
                    Toast.fire({
                        icon: 'error',
                        title: ' 请重试'
                    })
                    return false
                }
            });

            $("#turnPages").on("click", "li", function (data) {
                let activePage = $(this).data("page")
                if (activePage === -2) {
                    return
                } else if (activePage === 0) {
                    if (page_current != 1) {
                        page_current = page_current - 1
                    }
                } else if (activePage === -1) {
                    if (page_current != max_page) {
                        page_current = page_current + 1
                    }
                } else {
                    page_current = activePage
                }
                $("#turnPages").children().eq(page_current + 1).addClass("active").siblings().removeClass("active")
                $.ajax({
                    type: 'POST',
                    url: '/member/getThingList',
                    async: true,
                    dataType: 'json',
                    data: {
                        page: page_current,
                        limit: page_limit
                    },
                    contentType: "application/x-www-form-urlencoded",
                    success: function (res) {
                        // console.log(res)
                        thing_list = res.data
                        let page_count = (Math.ceil(res.count / page_limit))
                        // buildTableFooter(page_count)
                        buildTableBody(res.data)
                    },
                    error: function (err) {
                        // console.log(JSON.stringify(err))
                        Toast.fire({
                            icon: 'error',
                            title: ' 请重试'
                        })
                        return false
                    }
                });
            })
        });
        function buildTableFooter(data) {
            let pageNum = data
            let $a
            console.log($("#turnPages").children("li:first"))
            $("#turnPages").children("li:first").next().nextAll().remove()
            let $arrow = '<li class="page-item" data-page="-1"><a class="page-link" href="javascript:void(0);">&raquo;</a></li>'
            $("#turnPages").children("li:first").next().after($arrow)
            for (let i = data; i > 0; i--) {
                $a = "<li class=\"page-item\" data-page=\"" + i + "\"><a class=\"page-link\" href=\"javascript:void(0);\" >" + i + "</a></li>"
                $("#turnPages").children("li:first").next().after($a)
            }
            // $("#turnPages").children("li:first").next().next().addClass("active")

            $("#turnPages").children().eq(page_current + 1).addClass("active")
        };
        $(".dropdown-menu").on("click", "a", function () {
            // console.log($(this).attr("tabindex"))
            let num = $(this).attr("tabindex")
            $(".dropdown-toggle").text("每页" + num + "条")
            page_limit = num
            page_current = 1
            $.ajax({
                type: 'POST',
                url: '/member/getThingList',
                async: true,
                dataType: 'json',
                data: {
                    page: page_current,
                    limit: page_limit
                },
                contentType: "application/x-www-form-urlencoded",
                success: function (res) {
                    // console.log(res)
                    thing_list = res.data
                    max_page = Math.ceil(res.count / page_limit)
                    buildTableFooter(max_page)
                    buildTableBody(res.data)
                },
                error: function (err) {
                    // console.log(JSON.stringify(err))
                    Toast.fire({
                        icon: 'error',
                        title: ' 请重试'
                    })
                    return false
                }
            });
        })
        function buildTableBody(data) {
            let pageData = data
            $("#pageBody").empty()
            let $tr = new Array()
            // console.log(pageData.length)
            for (let i = 0; i < pageData.length; i++) {
                $tr = []
                $tr.push("<tr id=\"" + i + "\">")
                $tr.push("<td style=\"text-align: center;\">" + pageData[i].tid + "</td >")
                $tr.push("<td style=\"text-align: center;\">" + pageData[i].name + "</td>")
                $tr.push("<td style=\"text-align: center;\">" + pageData[i].totalAmount + "</td>")
                $tr.push("<td style=\"text-align: center;\">" + pageData[i].currentAmount + "</td>")
                $tr.push("<td style=\"text-align: center;\"><button type=\"button\" class=\"btn  btn-info btn-xs \"  style=\"width:80px;\"id=\"show_modal\" data-toggle=\"modal\" data-target=\"#modal_borrow\">借用</button></td>")
                $tr.push("</tr>")
                $tr = $tr.join("")
                $("#pageBody").append($tr)
            }
            $("#pageBody").on("click", "#show_modal", function (data) {
                // console.log("修改")
                thing_id = parseInt($(this).parent().parent().attr("id"))
                $("select").empty()
                for (let i = 1; i <= thing_list[thing_id].currentAmount; i++) {
                    $("select").append(" <option>" + i + "</option>")
                }
            })
            $("#submit_btn").on("click", function () {
                console.log($("select").val())
                let thing_detail = thing_list[thing_id]
                let thing_data = {
                    "tid": thing_detail.tid,
                    "bid": "",
                    "status": "",
                    "amount": parseInt($("select").val()),
                    "startDate": "",
                    "memberName": "",
                    "memberAcount": "",
                    "itemName": thing_detail.name
                }
                $.ajax({
                    type: 'POST',
                    url: "/member/borrowThing",
                    async: true,
                    dataType: "Text",
                    data:
                        JSON.stringify(thing_data),
                    crossDomain: true,
                    xhrFields: {
                        withCredentials: true
                    },
                    contentType: "application/json;charset=UTF-8",
                    success: function (res) {
                        console.log(res)
                        console.log(res);

                        if (JSON.parse(res).statusCode === "200") {
                            Toast.fire({
                                icon: 'success',
                                title: ' 借用成功'
                            })
                            setTimeout(function () { window.location.href = "./getCanBorrowItemList" }, 1000);

                            return false
                        } else {
                            Toast.fire({
                                icon: 'error',
                                title: ' 请重试'
                            })
                            return false
                        }
                    },
                    error: function (err) {
                        console.log(JSON.stringify(err));
                        Toast.fire({
                            icon: 'error',
                            title: ' 请重试'
                        })
                        return false
                    }
                });
            })
        }

    </script>


</body>

</html>